<template>
  <div class="app-container">
    <el-form :inline="true" :model=from class="demo-form-inline" ref="from">
        <el-form-item label="id"  prop="id">
          <el-input v-model="from.id" placeholder="id"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="from.account" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="from.realName" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('from')">重置</el-button>
        </el-form-item>
      </el-form>
        <el-table
      :data="Adiminlist"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="id"
        sortable
        label="id">
      </el-table-column>
      <el-table-column
        prop="account"
        label="管理员账号">
      </el-table-column>
      <el-table-column
        prop="realName"
        label="管理员姓名">
      </el-table-column>
      <el-table-column
        prop="pwd"
        label="管理员密码">
      </el-table-column>
      <el-table-column
        prop="roles"
        label="权限">
      </el-table-column>
      <el-table-column
        prop="lastIp"
        label="最后登录的ip">
      </el-table-column>
      <el-table-column
        prop="lastTime"
        :formatter="dateFormat"
        label="最后登录时间"
        >
      </el-table-column>
      <el-table-column
        prop="loginCount"
        label="登录次数">
      </el-table-column>
      <el-table-column
        prop="level"
        label="级别">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="isDel"
        label="是否删除">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button @click="toupdateClick(scope.row.id)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-dialog title="管理员信息" :visible.sync="dialogVisible" width="30%">
        <el-form label-width="80px" size="small">
            <el-form-item label="账号" >
                <el-input v-model="am.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" >
                <el-input v-model="am.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" >
                <el-input v-model="am.realName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限" >
                <el-input v-model="am.roles" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="ip" >
                <el-input v-model="am.lastIp" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="时间" >
              <el-date-picker
                v-model="am.lastTime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00">
              </el-date-picker>
            </el-form-item>
<!--             
            <el-form-item label="时间" >
                <el-input v-model="am.lastTime" autocomplete="off"></el-input>
            </el-form-item> -->
            <el-form-item label="登录次数" >
                <el-input v-model="am.loginCount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="级别" >
                <el-input v-model="am.level" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" >
                <el-input v-model="am.status" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否删除">
              <el-switch
              :active-value="2"
              :inactive-value="0"
              v-model="am.isDel"
              ></el-switch>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
        </div>
    </el-dialog>
    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=this.current
          :page-sizes="[10, 20, 30, 40, 100, 200, 300, 400]"
          :page-size=this.size
          layout="total, sizes, prev, pager, next, jumper"
          :total=this.total>
        </el-pagination>
  </div>
</template>
<style>
      .el-table .warning-row {
        background: oldlace;
      }
    
      .el-table .success-row {
        background: #f0f9eb;
      }
    </style>
<script>
import { PostList,DelAdimin,AddAdimin,ToUpAdimin,upAdimin } from '@/api/table'
import moment from 'moment'
import {getUserIP} from '@/myandjs/utils'

export default {
 
  data() {
    return {
      dialogVisible: false,
      from:{},
      QueryPageParam:{},
      total:0,
      size:10,
      current:1,
      pages:1,
      Adiminlist:[],
      ip : '',
      am:{}
    }
  },
  created() {
    this.fetchData()
    // this. huoip()
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
        if (rowIndex%3 == 0) {
          return 'warning-row';
        } else if (rowIndex%3 == 2) {
          return 'success-row';
        }
        return '';
      },
    fetchData() {
      // console.log(">>>>>>>>>>>>",this.Adiminlist)
      PostList({
        size: this.size,
        current: this.current,
        param:this.from
      }).then(response => {
        if(response.code==20000 && response.success==true && response.message=='成功'){
          this.Adiminlist = response.data.adimin.records
          this.total=response.data.adimin.total
          this.size=response.data.adimin.size
          this.current=response.data.adimin.current
          this.pages=response.data.adimin.pages
          this.listLoading = false
          // console.log(">>>>>>>>>>>>",this.Adiminlist)
          }else{
            console.log("获取数据出现错误")
        }
      })
    },
    // 点击删除事件获取id
    delClick(id){
      // let that = this;
      DelAdimin(id).then(response => {
          if(response.code==20000 && response.success==true && response.message=='成功'){
            this.$options.methods.fetchData.bind(this)()
          // console.log(this.list())
          // this.$options.methods.list.bind(this)()
          }else{
              console.log("删除后重新获取表单数据时出现问题")
          }
              
      })
      // this.$options.methods.list()
      // this.list()
      },
      // 查询修改的信息
      toupdateClick(id){
        ToUpAdimin(id).then(response => {
            if(response.code==20000 && response.success==true && response.message=='成功'){
            this.am=response.data.adimin
            // this.am.lastTime=this.am.lastTime*1000
            // this.bumen=JSON.stringify(res.data.data)
            this.dialogVisible=true
            console.log(this.am.id+">>>>>>>>>>>>>>>>>>")
            
            }else{
                console.log("获取需要修改表单数据时出现问题")
            }
                
        })
        // this.$options.methods.list()
        // this.list()
        },
        // 执行查询
        onSubmit(){
          this.current=1
          this.$options.methods.fetchData.bind(this)()
      },
      // 修改管理员信息
      update(){
        this.am.lastTime = this.am.lastTime-this.am.lastTime%1000
        upAdimin(this.am).then(response =>{
          if(response.code==20000 && response.success==true && response.message=='成功'){
            this.$options.methods.fetchData.bind(this)()
            this.dialogVisible=false
            console.log(response);
          }else{
              console.log("修改表单数据时出现问题")
          }
          
        })
      },
    // 调整每页条数
    handleSizeChange(val) {
        //console.log(`当前页...: ${val}`)
        this.size=val
        this.$options.methods.fetchData.bind(this)()
    },
    // 调整页码
    handleCurrentChange(val) {
        //console.log(`当前页: ${val}`)
        this.current=val
        this.$options.methods.fetchData.bind(this)()
    },
    onSubmit(){
      this.$options.methods.fetchData.bind(this)()
    },
    resetForm(formName) {
      console.log(formName)
      this.$refs[formName].resetFields();
    },
    // 转换时间戳为时间
    dateFormat:function(row) {
      // console.log(moment(row.lastTime).format("YYYY-MM-DD HH:mm:ss")+">>>>>>>>");
      // console.log(row.lastTime);
      var date = row.lastTime;
      if (date == undefined) {
        return "";
      }
        return moment(date*1000).format("YYYY-MM-DD HH:mm:ss");
      },
     
  }
}
</script>
